<template>
    <view style="height: 100%">
        <ul class="db">
            <block v-for="(item, index) in list" :key="index">
                <li class="db bgcf br12 pd015 mb15">
                    <view class="df ac pd150 bbf1">
                        <image class="img48 br8 mr12"  referrerPolicy='no-referrer' :src="item.thumb" />
                        <view class="f1">
                            <h2 class="ovh f14 c28 f600 db w255">{{ item.title }}</h2>
                            <p class="f12 c9d db mt4">{{ item.sku_title }}</p>
                        </view>
                    </view>
                    <view class="pd150">
                        <textarea class="h110 w100 f14 c28" @input="onInput" :value="value" :data-i="index" placeholder="写个评价吧～" placeholder-class="cc"></textarea>
                    </view>
                </li>
            </block>
        </ul>

        <view class="mt30">
            <button class="sub" @tap="fromData">提交</button>
        </view>
    </view>
</template>

<script>
const http = require('../../utils/http');
export default {
    data() {
        return {
            id: '',
            list: [],
            commentData: [],
            value: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        this.setData({
            id: options.id
        });
        this.getList();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        getList() {
            http.request('order/evaluatePage', {
                order_id: this.id
            })
                .then((res) => {
                    this.setData({
                        list: res.data
                    });
                })
                .catch((res) => {
                    uni.showToast({
                        title: res.message,
                        icon: 'none'
                    });
                });
        },

        onInput(e) {
            let i = e.currentTarget.dataset.i;
            let val = e.detail.value;
            this.setData({
                [`list[${i}].value`]: val
            });
        },

        /**
         * 提交表单
         */
        fromData() {
            var that = this;
            var data = [];
            that.list.forEach((i) => {
                data.push({
                    id: i.id,
                    value: i.value
                });
            });
            let sub_data = {
                order_id: this.id,
                commentData: JSON.stringify(data)
            };
            http.request('order/commentGoods', sub_data)
                .then((res) => {
                    uni.showToast({
                        title: res.message
                    });
                    setTimeout(() => {
                        uni.navigateBack({
                            delta: 1
                        });
                    }, 1500);
                })
                .catch((res) => {
                    uni.showToast({
                        title: res.message,
                        icon: 'none'
                    });
                });
        }
    }
};
</script>
<style>
@import './evaluate.css';
</style>
